<script setup lang="ts">
import { requiredCheck, singleIpCheck, validatePortCheck } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData, getDataByIp } from "@/api/modules/resource/host-finger";
import SelectAppInput from "@/components/SelectAppInput/index.vue";
import SelectFingerTextData from "@/components/SelectFingerTextData/index.vue";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    name: [...requiredCheck("请输入主机名")],
    fingerarr: [
      ...requiredCheck("请选择指纹样例","change"),
      {
        validator: (rule, value, callback) => {
          if (!updateFormData.fingerarr?.length) {
            callback(new Error("请选择指纹样例"));
          }
          if (updateFormData.fingerarr.some(item => !item.port || !item.text)) {
            callback(new Error("请检查端口或指纹信息是否存在空"));
          }
          const vPort = (str, min = 2, max = 5) => {
            const reg = new RegExp(
              `^((6553[0-5])|(655[0-2][0-9])|(65[0-4][0-9]{2})|(6[0-4][0-9]{3})|([1-5][0-9]{4})|([0-5]{0,5})|([0][0-9]{1,4})|([0-9]{1,4}))$`
            );
            return reg.test(str);
          };
          if (updateFormData.fingerarr.some(item => !vPort(item.port))) {
            callback(new Error("请检查端口是否填写正确"));
          }
          callback();
          // if (value == "" || value == undefined) {
          //   callback();
          // }
          // if (value == "0") {
          //   callback();
          // } else if (value && vPort(value)) {
          //   callback();
          // } else {
          //   callback(new Error(rule.message || "端口格式错误,请重新输入!"));
          // }
        }
      }
    ]
  },
  defaultData: {
    fingerarr: []
  }
});

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      fingerarr: updateFormData.fingerarr,
      name: updateFormData?.name,
      ip: updateFormData?.ip,
      del: {
        ip: updateFormData?.ip
      }
    }
  });
  emits("success");
}

function select(data) {
  console.log(data);
  updateFormData.fingerarr = data.rowList.map(item => {
    return {
      port: item.port,
      fingername: item.name,
      text: item.text,
      app: item.app,
      source: "新增"
    };
  });
  updateFormRef.value.clearValidate();
}

async function getByipData() {
  const res = await getDataByIp({
    ip: props.rowData.ip
  });
  console.log(`res:::`, res);
  updateFormData.fingerarr = res.data.map(item => {
    return {
      port: item.port,
      fingername: item.name,
      text: item.text,
      app: item.app,
      source: item.source
    };
  });
}
</script>

<template>
  <div
    class="update-form"
    style="display: inline-block;height: 55px"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.ip
      });
      getByipData();
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="600px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="主机名" prop="name">
            <el-input style="width: 220px" v-model="updateFormData.name" auto-complete="off" placeholder="请输入主机名" />
          </el-form-item>
          <el-form-item label="指纹" prop="fingerarr">
            <div class="v-box" style="align-items: self-start">
              <div class="h-box">
                <SelectFingerTextData @select="select">
                  <el-button type="primary">选择指纹样例</el-button>
                </SelectFingerTextData>
                <!--                <el-button type="primary">新增</el-button>-->
              </div>
              <div class="mg-t-sm">
                <div class="h-box mg-b-sm" v-for="(item, index) in updateFormData.fingerarr" :key="item?.id">
                  <el-input v-model="item.port" placeholder="端口" style="width: 80px"></el-input>
                  <el-input placeholder="指纹信息" v-model="item.text" class="mg-l-sm" style="width: 220px"></el-input>
                  <el-icon @click="updateFormData.fingerarr.splice(index, 1)" class="mg-l-sm cursor-pointer">
                    <Remove />
                  </el-icon>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
